<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/courseCategory.css">
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <style>
        .custom-tree-node {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            padding-right: 8px;
        }
    </style>
</head>
<body>
<!--分类的总体框架-->
<div id="courseCategory" class="container-fluid">
    <!--根节点-->
    <div id="rootNode">
        <!--        <el-tree :data="tree" :props="defaultProps" @mouseover="showOperation" ></el-tree>-->
        <div class="custom-tree-container">
            <!--            <div class="block">-->
            <!--                <p>使用 render-content</p>-->
            <!--                <el-tree-->
            <!--                        :data="data"-->
            <!--                        show-checkbox-->
            <!--                        node-key="id"-->
            <!--                        default-expand-all-->
            <!--                        :expand-on-click-node="false"-->
            <!--                        :render-content="renderContent">-->
            <!--                </el-tree>-->
            <!--            </div>-->
            <div class="block">
                <p>课程分类列表</p>
                <el-tree
                        :data="data"

                        node-key="id"
                        default-expand-all
                        :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
                  type="text"
                  size="mini"

                  @click="append(data)"
          >
            <i class="fa fa-plus fa-lg"></i>

          </el-button>

          <el-button
                  type="text"
                  size="mini"
                  @click="() => remove(node, data)">
            <i class="fa fa-trash-o fa-lg"></i>
          </el-button>
        </span>
      </span>
                </el-tree>
            </div>
        </div>


    </div>
    <!--input-->
    <div style="width: 40%;height: 100%;float: left">
        <input type="text" class="form-control" v-model="newCategory">
    </div>
</div>
</body>
<script src="js/axios.js"></script>
<script src="js/vue.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<script src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script>
<script>
    let id = 1000;

    var cc = new Vue({
        el: "#courseCategory",
        data: {
            data: [
                {
                    id: 1,
                    label: "Java",
                    "parentId": 0,
                    children: [
                        {
                            id: 8,
                            label: "Java基础",
                            "parentId": 1,
                            children: [
                                {
                                    id: 13,
                                    label: "JavaOOP",
                                    "parentId": 8,
                                    children: [
                                        {
                                            id: 19,
                                            label: "继承",
                                            "parentId": 13,
                                            children: []
                                        },
                                        {
                                            id: 20,
                                            label: "封装",
                                            "parentId": 13,
                                            children: []
                                        },
                                        {
                                            id: 21,
                                            label: "多态",
                                            "parentId": 13,
                                            children: []
                                        }
                                    ]
                                },
                                {
                                    id: 14,
                                    label: "Java反射",
                                    "parentId": 8,
                                    children: []
                                }
                            ]
                        }
                    ]
                },
                {
                    id: 2,
                    label: "Python",
                    "parentId": 0,
                    children: [
                        {
                            id: 9,
                            label: "Python基础",
                            "parentId": 2,
                            children: [
                                {
                                    id: 15,
                                    label: "Python字典",
                                    "parentId": 9,
                                    children: []
                                },
                                {
                                    id: 16,
                                    label: "爬虫",
                                    "parentId": 9,
                                    children: []
                                }
                            ]
                        }
                    ]
                },
                {
                    id: 3,
                    label: "UI",
                    "parentId": 0,
                    children: [
                        {
                            id: 10,
                            label: "UI设计基础",
                            "parentId": 3,
                            children: [
                                {
                                    id: 17,
                                    label: "PS",
                                    "parentId": 10,
                                    children: []
                                },
                                {
                                    id: 18,
                                    label: "AE",
                                    "parentId": 10,
                                    children: []
                                }
                            ]
                        }
                    ]
                },
                {
                    id: 4,
                    label: "JavaScript",
                    "parentId": 0,
                    children: [
                        {
                            id: 11,
                            label: "ES6规范",
                            "parentId": 4,
                            children: [
                                {
                                    id: 22,
                                    label: "DOM",
                                    "parentId": 11,
                                    children: []
                                }
                            ]
                        }
                    ]
                },
                {
                    id: 5,
                    label: "MySQL",
                    "parentId": 0,
                    children: [
                        {
                            id: 12,
                            label: "MySQL基础",
                            "parentId": 5,
                            children: []
                        }
                    ]
                },
                {
                    id: 6,
                    label: "Network",
                    "parentId": 0,
                    children: []
                },
                {
                    id: 7,
                    label: "QA",
                    "parentId": 0,
                    children: []
                }
            ],
            // data: JSON.parse(JSON.stringify(data)),
            // data: JSON.parse(JSON.stringify(data)),
            newCategory: "",


        },
        methods: {
            append(data) {
                console.info(this.newCategory)
                const newChild = {id: id++, label: this.newCategory, children: []};
                if (!data.children) {
                    this.$set(data, 'children', []);
                }
                data.children.push(newChild);
                this.newCategory="";
            },
            remove(node, data) {
                const parent = node.parent;
                const children = parent.data.children || parent.data;
                const index = children.findIndex(d => d.id === data.id);
                children.splice(index, 1);
            },

            //   renderContent(h, { node, data, store }) {
            //       return (
            //           <span class="custom-tree-node">
            //   <span>{node.label}</span>
            //   <span>
            //     <el-button size="mini" type="text" on-click={ () => this.append(data) }><i class="fa fa-plus fa-lg"></i></el-button>
            //     <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }><i class="fa fa-trash-o fa-lg"></i></el-button>
            //   </span>
            // </span>);
            //   }
        }
    });
</script>
</html>